import {View} from 'react-native';
import {Empty, GridThree} from '../../components';
import {postUserCollect} from '../../services';
import {useCallback, useState} from 'react';
import Recommend from './Recommend';
import {useUserInfoStore} from '../../mobx';
import {observer} from 'mobx-react-lite';
import {dpw12} from '../../constants';
import {useFocusEffect} from '@react-navigation/native';

const Shelf = ({navigation, typeId}: any) => {
  const [data, setData] = useState([]);
  const {userInfo} = useUserInfoStore();

  // 获取列表数据
  useFocusEffect(
    useCallback(() => {
      if (userInfo?.Token && typeId) {
        postUserCollect({UT: userInfo?.Token, Type: typeId})
          .then((res: any) => {
            if (Array.isArray(res?.Data)) {
              setData(res.Data);
            } else {
              throw new Error('');
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    }, [userInfo?.Token, typeId]),
  );

  return (
    <>
      <View style={{marginHorizontal: dpw12}}>
        {data.length > 0 ? (
          <GridThree list={data} type={1} navigation={navigation} />
        ) : (
          <Empty type="shelf" />
        )}
      </View>
      <Recommend navigation={navigation} typeId={typeId} />
    </>
  );
};

export default observer(Shelf);
